<template>
  <div class="workshop-bottom-gantt-chart-wrapper">
    <figure class="handle-wrapper">
      <figure @click="changeChartIsShow(true)"></figure>
      <figure @click="changeChartIsShow(false)"></figure>
    </figure>

    <div :class="[chartIsShow? 'moveUp': 'moveDown']">
      <WorkshopLabelTitle :title="'生产回溯情况'" :background="titleImg" :isAmplify="false" class="WorkshopLabelTitle">
        <template v-slot:content>
          <div class="slot-content-wrapper">
            <!-- <p @click="handleReset" class="label-background">车间级计划</p> -->
            <section class="flex">
              <span>区域编号：</span>
              <section class="select-wrapper">
                <el-select @change="getData" clearable v-model=" regionStation" popper-class="aircraft-type-select" :suffix-icon="elSelectIconAircraft">
                  <el-option v-for="item in regionList" :key="item" :label="item" :value="item" />
                </el-select>
              </section>
            </section>
            <section class="flex">
              <span>设备编号：</span>
              <section class="select-wrapper">
                <el-select clearable @change="getData" v-model=" deviceStation" popper-class="aircraft-type-select" :suffix-icon="elSelectIconAircraft">
                  <el-option v-for="item in deviceList" :key="item" :label="item" :value="item" />
                </el-select>
              </section>
            </section>
          </div>
        </template>
      </WorkshopLabelTitle>
      <div class="gantt-chart-wrapper">
        <AbbreviationDay :list="planList" :labelKey="labelKey" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import WorkshopLabelTitle from './WorkshopLabelTitle.vue'
import elSelectIconAircraft from '@/components/icon/elSelectIconAircraft.vue'
import titleImg from '@/assets/images/title.png'
import { getHongduPlanList } from '@/api/index.js'
import AbbreviationDay from '@/components/Gantt/AbbreviationDay.vue'
import { useStore } from 'vuex'
const store = useStore()

onMounted(async () => {
  getData()
})

const chartIsShow = computed(() => store.state.chartIsShow)

function changeChartIsShow (val) {
  store.commit('setChartIsShow', val)
}

const labelKeyArr = [
  { label1: '区域', label1Key: 'makeSerialNumber', label2: '设备', label2Key: 'workStation' }
  // { label1: '工位', label1Key: 'workStation', label2: '站位', label2Key: 'workPosition' },
  // { label1: '架次号', label1Key: 'makeSerialNumber', label2: '站位', label2Key: 'workPosition' },
  // { label1: '站位', label1Key: 'workPosition', label2: 'AO名称', label2Key: 'aoName' }
]

// 设备编号列表
const deviceList = ref([
  '设备1', '设备2', '设备3', '设备4', '设备5', '设备6',
  '设备7', '设备8', '设备9', '设备10', '设备11', '设备12'
])
// 区域编号列表
const regionList = ref([
  '区域1', '区域2', '区域3', '区域4', '区域5',
  '区域6', '区域7', '区域8', '区域9', '区域10'
])

const deviceStation = ref('') // 工位号选择
const regionStation = ref('') // 架次号选择

const planList = ref([])
async function getData () {
  const params = {
    makeSerialNumber: regionStation.value,
    workStation: deviceStation.value
  }
  const res = await getHongduPlanList(params)
  if (res?.data?.data) {
    planList.value = res.data.data
  }
}

const labelKey = computed(() => {
  const index = 0
  // if (regionStation.value && deviceStation.value) { // 架次+工位--->占位
  //   index = 3 // 两者都不为空
  // } else if (deviceStation.value) { // 工位--->架次
  //   index = 2 // 只有workStation不为空
  // } else if (regionStation.value) { // 架次--->工位
  //   index = 1 // 只有makeSerialNumber不为空
  // } else { // 返回全部
  //   index = 0 // 两者都为空
  // }
  return labelKeyArr[index]
})

function handleReset () {
  regionStation.value = ''
  deviceStation.value = ''
  getData()
}
</script>

<style lang="less">
.workshop-bottom-gantt-chart-wrapper {
  background: url('@/assets/images/gantt-chart.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 5px;
  left: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 10px;
  margin-right: 10px;
  box-sizing: border-box;
  width: 100%;
  pointer-events: all;
  z-index: 2;

  .handle-wrapper {
    background: url('@/assets/images/gantt-animation.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    figure {
      background-repeat: no-repeat;
      background-size: cover;
      width: 192px;
      height: 18px;
      cursor: pointer;
    }
    figure:first-child {
      background: url('@/assets/images/gantt-animation-top.png') no-repeat;
      background-size: 100% 100%;
    }
    figure:last-child {
      background: url('@/assets/images/gantt-animation-bottom.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .WorkshopLabelTitle {
    box-sizing: border-box;
  }

  .slot-content-wrapper {
    display: flex;
    gap: 40px;
    margin-top: 25px;

    .label-background {
      cursor: pointer;
      // background: url('@/assets/homePage/aircraft-type-select.png') no-repeat;
      // background-size: 100% 100%;
      width: 128px;
      height: 29px;
      text-align: center;
    }

    .select-wrapper {
      width: 150px;
      height: 29px;
      padding-left: 24px;
      padding-right: 8px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background: url('@/assets/homePage/aircraft-type-select.png') no-repeat;
      background-size: 100% 100%;
      pointer-events: all;

      .el-select {
        margin-top: -3px;
        .el-select__wrapper {
          box-shadow: none;
          background-color: transparent;
        }

        .el-select__placeholder {
          span {
            font-family: Source Han Sans CN;
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }
  }
  .gantt-chart-wrapper {
    margin-top: -32px;
    height: 328px;
    width: 100%;
  }

  .moveDown{
    height: 0;
    transition: 0.5s ease;
  }
  .moveUp{
    transition: 0.5s ease;
    height: 388px;
  }
}
</style>
<style>
.aircraft-type-select {
  border: none !important;
}
.aircraft-type-select.is-light,
.el-popper.is-light > .el-popper__arrow:before {
  border: none !important;
}
.aircraft-type-select .el-select-dropdown__item {
  font-family: Source Han Sans CN;
  color: #c5e4ff !important;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.aircraft-type-select .el-select-dropdown__item.is-selected {
  color: #70bdff !important;
}

.aircraft-type-select .el-select-dropdown__list {
  margin-top: -8px !important;
  padding: 0 !important;
  border-radius: 0 0 8px 8px !important;
  border-top: none !important;
}
.aircraft-type-select .el-select-dropdown__item.is-hovering {
  background: #65b3ff;
  color: #c5e4ff;
}

.aircraft-type-select {
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  box-shadow: none !important;
}

.aircraft-type-select.is-light .el-popper__arrow::before {
  display: none !important;
}
</style>
